<template>
    <div class="text-right"><el-link @click="getData">刷新</el-link></div>
    <div id="print" class="print">
        <h2 class="text-center">付款 报销申请单</h2>
        <UniformDescriptions class="mt5" :column="4" border >
            <el-descriptions-item label-class-name="my-label" class-name="my-content">
                <template #label><div class="cell-item">申请人　　</div></template>
                <div class="w-f"><el-text>{{ ruleForm.user.name }}</el-text></div>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" class-name="my-content" :span="2">
                <template #label><div class="cell-item">申请部门　</div></template>
                <div style="width: 300px;"><el-text>{{ ruleForm.project.title }}</el-text></div>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" class-name="my-content">
                <template #label><div class="cell-item">申请日期　</div></template>
                <div class="w-f"><el-text>{{ ruleForm.apply_date }}</el-text></div>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" class-name="my-content">
                <template #label><div class="cell-item">申请金额　</div></template>
                <div class="w-f"><el-text>{{ ruleForm.apply_price }}</el-text></div>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" class-name="my-content">
                <template #label><div class="cell-item">稽核金额　</div></template>
                <div class="w-f"><el-text>{{ ruleForm.audit_price }}</el-text></div>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" class-name="my-content">
                <template #label><div class="cell-item">还借支　　</div></template>
                <div class="w-f"><el-text>{{ ruleForm.back_borrow }}</el-text></div>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" class-name="my-content">
                <template #label><div class="cell-item">实付金额　</div></template>
                <div class="w-f"><el-text>{{ ruleForm.price }}</el-text></div>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" class-name="my-content">
                <template #label><div class="cell-item">对方性质　</div></template>
                <div class="w-f"><el-text>{{ ruleForm.nature == '/' ? '' : ruleForm.nature }}</el-text></div>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" class-name="my-content">
                <template #label><div class="cell-item">支付方式　</div></template>
                <div class="w-f"><el-text>{{ ruleForm.pay_type == '/' ? '' : ruleForm.pay_type }}</el-text></div>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" class-name="my-content">
                <template #label><div class="cell-item">支付公司　</div></template>
                <div class="w-f"><el-text>{{ ruleForm.pay_company == '/' ? '' : ruleForm.pay_company }}</el-text></div>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" class-name="my-content">
                <template #label><div class="cell-item">银行手续费</div></template>
                <div class="w-f"><el-text>{{ ruleForm.bank_charges == '/' ? '' : ruleForm.bank_charges }}</el-text></div>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" class-name="my-content" :span="4">
                <template #label><div class="cell-item">　</div></template>
                <div class="text-center"><el-text>收款账号</el-text></div>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" class-name="my-content" :span="2">
                <template #label><div class="cell-item">账号名称　</div></template>
                <div><el-text>{{ ruleForm.name }}</el-text></div>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" class-name="my-content" :span="2">
                <template #label><div class="cell-item">开户行　　</div></template>
                <div><el-text>{{ ruleForm.bank == '/' ? '' : ruleForm.bank }}</el-text></div>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" class-name="my-content" :span="2">
                <template #label><div class="cell-item">账号　　　</div></template>
                <div><el-text>{{ ruleForm.bank_number == '/' ? '' : ruleForm.bank_number }}</el-text></div>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" class-name="my-content" :span="2">
                <template #label><div class="cell-item">行号　　　</div></template>
                <div><el-text>{{ ruleForm.bank_no == '/' ? '' : ruleForm.bank_no }}</el-text></div>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" class-name="my-content" :span="2">
                <template #label><div class="cell-item">备注　　　</div></template>
                <div style="height: 60px;font-size: 0.5rem;line-height: 12px;"><el-text>{{ ruleForm.remarks == '/' ? '' : ruleForm.remarks }}</el-text></div>
            </el-descriptions-item>
        </UniformDescriptions>

        <div class="mt10"><el-text>报销明细</el-text></div>
        <el-table :data="tableData" border class="custom-header-table" :span-method="arraySpanMethod" style="width: 100%;height: 225px !important;" size="small">
            <el-table-column label="费用科目" show-overflow-tooltip align="center" >
                <template #default="scope">
                    <el-text>{{ scope.row.title == '/' ? '' : scope.row.title }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="分摊类型" show-overflow-tooltip align="center" width="100">
                <template #default="scope">
                    <el-text>{{ scope.row.type == '/' ? '' : scope.row.type }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="项目状态" show-overflow-tooltip align="center" width="90">
                <template #default="scope">
                    <el-text>{{ scope.row.status == '/' ? '' : scope.row.status }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="费用承担项目" show-overflow-tooltip align="center" width="120">
                <template #default="scope">
                    <el-text>{{ scope.row.project == '/' ? '' : scope.row.project }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="单位" show-overflow-tooltip align="center" width="60">
                <template #default="scope">
                    <el-text>{{ scope.row.unit == '/' ? '' : scope.row.unit }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="数量" show-overflow-tooltip align="center" width="60">
                <template #default="scope">
                    <el-text>{{ scope.row.nums }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="金额" show-overflow-tooltip align="center" width="90">
                <template #default="scope">
                    <el-text>{{ scope.row.price > 0 ? scope.row.price : '' }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="税率%" show-overflow-tooltip align="center" width="70">
                <template #default="scope">
                    <el-text>{{ scope.row.tax_rate }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="税金" show-overflow-tooltip align="center" width="90">
                <template #default="scope">
                    <el-text>{{ scope.row.tax_price > 0 ? scope.row.tax_price : '' }}</el-text>
                </template>
            </el-table-column>
        </el-table>
        
        <el-descriptions :column="4" size="small">
            <el-descriptions-item label="项目部：(实际申请人）" label-class-name="my-label" class-name="my-content">　　</el-descriptions-item>
            <el-descriptions-item label="综合管理部" label-class-name="my-label" class-name="my-content">　　</el-descriptions-item>
            <el-descriptions-item label="总经理" label-class-name="my-label" class-name="my-content">　　</el-descriptions-item>
            <el-descriptions-item label="会计" label-class-name="my-label" class-name="my-content">　　</el-descriptions-item>
        </el-descriptions>
        <div class="receipt">
            <div class="receipt-info text-center">
                <p style="font-size: 2rem;">粘 贴 票 据</p>
                <p class="text-left" style="margin-top: 8rem;">各注： 1.供应商电子打印发募方盖公章;经办人必须核实确认签字；</p>
                <p class="text-left">　　　 2.零星报销电子打印发票经办人必须核实确认签字。</p>
                <p class="text-center">　　　　　　　　　　　　　　　　　　　　　　　　　　　　共　页　　　报销人:　　　</p>
            </div>
        </div>
    </div>
    <div class="text-center mt30"><el-button @click="printElement('print')"> 打印 </el-button></div>
</template>
  
<script lang="ts" setup>
import { ref, watch } from 'vue'
import http from '../util/request'
import UniformDescriptions from '@/components/UniformDescriptions.vue'
import { PrinterService } from '../util/printer'
import func from '../util/function';
const printer = new PrinterService()
const china_price = ref('')
let user:any = sessionStorage.getItem('user')
user = JSON.parse(user)
interface RuleForm {
    id:number
    source_id:number
    type:string
    role_id:number
    user_id:number
    apply_date: string
    apply_price: number
    back_borrow: number
    audit_price: number
    nature: string
    pay_type:string
    price: number
    receive_type: string
    details:any
    pay_company: string
    bank_charges: string
    name: string
    bank: string
    bank_number: string
    bank_no: string
    remarks: string
    user:any
    project:any
}

const ruleForm = ref<RuleForm>({
    id:0,
    source_id:0,
    type:'reimburse',
    role_id:0,
    user_id:0,
    apply_date: '',
    price: 0,
    back_borrow: 0,
    audit_price: 0,
    nature: '',
    pay_type:'',
    apply_price: 0,
    receive_type: '',
    details:'',
    pay_company: '',
    bank_charges: '',
    name: '',
    bank: '',
    bank_number: '',
    bank_no: '',
    remarks: '',
    user:{},
    project:{}
})

interface Details {
    title:string
    type:string
    project:string
    status:string
    unit:string
    nums:number
    role:string
    price:number
    audit_price:number
    tax_rate:number
    tax_price:number|string
}

const Details = ref<Details>({
    title:'/',
    type:'/',
    project:'/',
    status:'/',
    unit:'/',
    nums:0,
    role:'/',
    price:0,
    audit_price:0,
    tax_rate:0,
    tax_price:0,
})

const tableData = ref<Details[]>([])

const getData = () => {
    if(ruleForm.value.id == 0){
        return;
    }
    http.get('/reimburse/'+ruleForm.value.id).then((response:any)=>{
        ruleForm.value = response.data.data
        let l = 5 - ruleForm.value.details.length
        if(l > 0){
            for (let index = 0; index < l; index++) {
                ruleForm.value.details.push({title:'　',tax_price:0,price:0})
            }
        }
        let arr = ruleForm.value.details
        let tax_price = arr.reduce((sum:any, arr:any) => parseFloat(sum) + parseFloat(arr.tax_price), 0);
        //无论有没有新增一条统计
        china_price.value = func.numberToChinese(ruleForm.value.apply_price)
        ruleForm.value.details.push({title:'合计',type:'大写金额',project:china_price.value,status:'',unit:'/',nums:'',role:'/',price:ruleForm.value.apply_price,audit_price:'',tax_rate:'',tax_price:tax_price})
        tableData.value = ruleForm.value.details
        ruleForm.value.details = ''
        
    })
}

const arraySpanMethod = ({
  rowIndex,
  columnIndex,
}: any) => {
  if (rowIndex === tableData.value.length - 1) {
    if (columnIndex === 2) {
      return [0, 0]
    }
    if (columnIndex === 3) {
      return [1, 3]
    }
    if (columnIndex === 4) {
      return [0, 0]
    }
  }
}

const printElement = (elementId:string) => {
    printer.printElement(elementId, { title: '　' })
}

const props = defineProps<{
    data:any
    type:boolean
}>()

watch(props,()=>{
    ruleForm.value.id = props.data
    getData()
},{ immediate: true })

</script>
<style scoped>
.cell-item{width: 65px;font-size: .8rem !important;}
.print{width: 210mm;size: A4;margin:0px auto;padding: 0px 15px 0px 15px;}
.w-f{width: 78px;}
.el-table{border: 1px solid #bbbbbb;margin-top: 5px;}
:deep(.custom-header-table .el-table__header th) {
  font-weight: 300 !important; /* 加粗 */
  color: #000000;

}
.el-table .cell {font-size: .7rem !important;padding: 0px 3px;}
.el-text{font-size: .8rem !important;}

.el-table .el-table__header-wrapper th,
.el-table .el-table__body-wrapper td {
  border-color: #bbbbbb !important;
}

:deep(.my-label) {
  padding: 2px 4px !important;
  font-size: .8rem !important;
}

:deep(.my-content) {
    padding: 2px 4px !important;
}
.receipt-info{padding: 11rem 30px 5rem 30px;border: 1px solid #000000;height: auto;margin-top: 100px;}
</style>
